<template>
  <div class="videoBox">
    <video-player
      v-if="videoShow"
      class="video video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="true"
      :options="playerOptions"
      @timeupdate="handleTimeUpdate"
    ></video-player>
    <div
      v-else
      class="video no border-text"
    >
      无视频回放
    </div>
    <div class="track border-text">
      {{ track.content }}
    </div>
  </div>
</template>

<script>
import {
  binarySearchTrack,
  formatTrackTime
} from '@/utils/track'
import { getSubtitle } from '@/api/conferences'
export default {
  name: 'MeetingVideo',
  props: {
    videoPath: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      conferenceId: '',
      // 控制video显隐
      videoShow: false,
      // 播放器配置
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [
          {
            type: '',
            src: ''
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      },
      // 字幕列表
      tracks: [],
      // 字幕信息
      track: {
        content: '字幕技术由【沧月流星】提供支持'
      }
    }
  },
  watch: {
    videoPath (newVal) {
      if (newVal) {
        this.playerOptions.sources[0].src = newVal
        this.videoShow = true
      } else {
        this.videoShow = false
      }
    }
  },
  created () {
    this.conferenceId = this.$route.query.conferenceId
  },
  mounted () {
    // 获取字幕
    this.handleGetSubtitle()
  },
  methods: {
    // 获取字幕
    async handleGetSubtitle () {
      const { data } = await getSubtitle(this.conferenceId)
      data && (this.tracks = data)
      // this.$request.conference.getSubtitle(
      //   this.conferenceId,
      //   (res) => {
      //     if (res.data) {
      //       this.tracks = res.data
      //     }
      //   },
      //   (err) => {
      //     this.$message.error(err.msg)
      //   }
      // )
    },
    // 更新字幕与网络质量
    handleTimeUpdate (e) {
      // 更新字幕
      const targetTime = formatTrackTime(e.currentTime())
      const idx = binarySearchTrack(this.tracks, targetTime)
      if (idx === -1) {
        this.track = {
          content: ''
        }
      } else {
        this.track = this.tracks[idx]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.videoBox {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  .video {
    overflow: hidden;
    width: 840px;
    height: 460px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e5e9ef;
    font-size: 25px;
  }
  .track {
    width: 80%;
    text-align: center;
    position: absolute;
    font-size: 20px;
    bottom: 30px;
    font-family: 'Raleway', sans-serif;
    color: $red;
  }
}
</style>
